<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<title>Imperial</title>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
	<meta name="author" content="" />

	<!-- CSS ====================================== -->
    <link rel="stylesheet" href="<%=path%>/resources/styles/prettyPhoto.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="<%=path%>/resources/styles/inner.css" />
	<link rel="stylesheet" href="<%=path%>/resources/styles/prettyPhoto.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="bodychild">
	<div id="outercontainer">
    	
        <!-- HEADER -->
        <div id="outerheader">
            <%@ include file="../common/header.jsp" %>
        </div>
        <!-- END HEADER -->
        
        <!-- BEFORE CONTENT -->
        <div id="outerbeforecontent">
        	<div id="beforecontent">
            	<section id="beforethecontent">
					<div class="intro-l">
                    	<h1 class="pagetitle">Portfolio</h1><span class="pagedesc">this can be ur tagline or something you want</span>
                    </div>
                    <div class="intro-r">
                    	Donec consectetur libero ut tortor condimentum<br />
						<h2>Come &amp; Join Our Newsletter</h2>
                    </div>
                    <div class="clear"></div>
                </section>
            </div>
        </div>
        <!-- END BEFORE CONTENT -->
        
        <!-- MAIN CONTENT -->
        <div id="outermain">
        	<div id="maincontent">
        	<section id="mainthecontent">

			<div id="ts-display-portfolio">
                
                <ul id="filter" class="controlnav">
                    <li class="segment-1 selected-1"><a href="#" data-value="all">All Categories</a></li>
                    <li class="segment-1"><a href="#" data-value="business">Business</a></li>
                    <li class="segment-1"><a href="#" data-value="html">Creative</a></li>
                    <li class="segment-1"><a href="#" data-value="wp">Photography</a></li>
                </ul>
                
                <ul id="ts-display-pf-filterable" class="ts-display-pf-col-4 image-grid">
                        <li data-id="id-1" class="business">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf1.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf1.jpg" alt="" />
                                
                                </a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-2" class="html">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf2.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf2.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>

                        <li data-id="id-3" class="wp">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf3.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf3.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>

                        <li data-id="id-4" class="business nomargin">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf4.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf4.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-5" class="business">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf5.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf5.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-6" class="html">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf6.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf6.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>

                        <li data-id="id-7" class="wp">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf7.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf7.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>

                        <li data-id="id-8" class="business nomargin">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf8.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf8.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-9" class="business">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf9.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf9.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-10" class="wp">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf10.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf10.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-11" class="html">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf11.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf11.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                        <li data-id="id-12" class="business nomargin">
                            <div class="ts-display-pf-img">
                                <a class="image" href="<%=path%>/resources/images/content/pf/pf12.jpg" data-rel="prettyPhoto[mixed]">
                                <span class="rollover"></span>
                                <img src="<%=path%>/resources/images/content/pf/pf12.jpg" alt="" /></a>							
                            </div>
                            <span class="shadowpfimg"></span>
                            <div class="ts-display-pf-text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                            </div>
                            <div class="ts-display-clear"></div>
                        </li>
                </ul>
                
                <div class="clear"></div>
                
                </div>
         
                <div class="clear"></div>
            </section>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
             
        <!-- FOOTER SIDEBAR -->
        <div id="outerfootersidebar">
        	<jsp:include page="../common/footersidebar.jsp" flush="true" />
        </div>
        <!-- END FOOTER SIDEBAR -->
               
        <!-- FOOTER -->
        <div id="outerfooter">
        	<%@ include file="../common/footercontainer.jsp" %>
        </div>
        <!-- END FOOTER -->
        
        <div class="clear"></div>
	</div> <!-- end outercontainer -->
    
</div> <!-- end bodychild -->

<!-- Javascript
================================================== -->
<!-- jQuery Fade -->
<script type="text/javascript" src="<%=path%>/resources/js/fade.js"></script>
<!-- jQuery PrettyPhoto -->
<script type="text/javascript" src="<%=path%>/resources/js/jquery.prettyPhoto.js"></script>

<script type="text/javascript" src="<%=path%>/resources/js/quicksand.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/quicksand_config.js"></script>


</body>
</html>
